<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-06 09:39:27
-->
<template>
  <div id="bottom4Container" style="height: 95%"></div>
</template>
<script>
// 导入图表
import { Chart } from "@antv/g2";
export default {
  data() {
    return {};
  },
  methods: {
    initChart() {
      const data = [
        { item: "离线设备", count: 27, percent: 0.9 },
        { item: "在线设备", count: 3, percent: 0.1 },
      ];
      const chart = new Chart({
        container: "bottom4Container",
        autoFit: true,
        height: 500,
      });
      chart.data(data);
      chart.scale("percent", {
        formatter: (val) => {
          val = val * 100 + "%";
          return val;
        },
      });
      chart.coordinate("theta", {
        radius: 0.8,
        innerRadius: 0.2,
      });
      chart.tooltip({
        showTitle: true,
        showMarkers: false,
        itemTpl:
          '<li class="g2-tooltip-list-item"><span style="background-color:{color};fill: {#fff};" class="g2-tooltip-marker"></span>{name}: {value}</li>',
      });
      // 辅助文本
      chart
        .annotation({
          style: {
            fontSize: 14,
            fill: "#fff",
          },
        })
        .text({
          position: ["50%", "50%"],
          content: "设备总数",
          style: {
            fontSize: 14,
            fill: "#fff",
            textAlign: "center",
          },
          offsetY: 0,
        })
        .text({
          position: ["50%", "50%"],
          content: "30",
          style: {
            fontSize: 20,
            fill: "#fff",
            textAlign: "center",
          },
          offsetX: -10,
          offsetY: 20,
        })

        .text({
          position: ["50%", "50%"],
          content: "台",
          style: {
            fontSize: 14,
            fill: "#fff",
            textAlign: "center",
          },
          offsetY: 20,
          offsetX: 20,
        });
      chart
        .interval()
        .adjust("stack")
        .position("percent")
        .color("item")
        .label("percent", (percent) => {
          return {
            content: (data) => {
              return `${data.item}: ${percent * 100}%`;
            },
          };
        })
        .tooltip("item*percent", (item, percent) => {
          percent = percent * 100 + "%";
          return {
            name: item,
            value: percent,
          };
        });

      chart.interaction("element-active");
      chart.theme({
        styleSheet: { paletteQualitative10: ["#1B9CD0", "#ABDFFF"] },
      });
      chart.render();
    },
  },
  mounted() {
    this.initChart();
  },
};
</script>
